<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>Title</title>
    <script src="../assets/js/views/vue.min.js"></script>
    <script type="text/javascript" src="../assets/js/echarts.js"></script>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/department/addDepartment.scss">

    <script src="${js}/jquery-1.9.1.min.js"></script>
    <%--<link rel="stylesheet" href="${frames}/css/table.css" type="text/css">--%>
    <%--<link rel="stylesheet" href="${frames}/css/qulitity.css" type="text/css" type="text/css">--%>
    <script src="${js}/jquery.dataTables.js"></script>
    <link href="../assets/css/bootstrap-datetimepicker.css" type="text/css">
    <script src="../assets/js/bootstrap-datetimepicker.min.js"></script>
    <%--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">--%>
    <%--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--%>
    <%--<link rel="stylesheet" href="../assets/css/bootstrapDatepickr-1.0.0.css">--%>
    <%--<script src="../assets/js/bootstrapDatepickr-1.0.0.min.js"></script>--%>
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <%--<script src="${assets}/js/views/bpAbnormal.js"></script>--%>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        body{
            width:98%;
        }
        h1{
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            color: #2a3137;
            margin-bottom: 26px;
            float: left;
            margin-top:0 !important
        }
        #main{
            width:470px;
            margin:0 auto;
            overflow:hidden;
            position:relative;
        }
        #main label{
            font-family: MicrosoftYaHei;
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #333333;
            width:120px;
            display:inline-block;
        }
        #main div{
            margin-bottom:20px;
        }
        .input{
            width: 260px;
            line-height: 19px;
            border: solid 1px #d0d0d0;
            display:inline-block;
            margin-left:16px;
            font-family: MicrosoftYaHei;
            font-size: 15px;
            font-weight: normal;
            font-stretch: normal;
            color: #333333 !important;
        }
        .bootstrapDatepickr-cal{
            top:250px !important;
        }
        .change{
            width:300px;
            margin:0 auto;
            margin-top:50px;
        }
        .btn{
            width:100px;
            line-height: 15px;
            background: #35acfd;
            color: white;
            margin-top:15px;
        }
        .modal-footer{
            width:255px;
            margin:0 auto;
        }
        #keep{
            background:#35acfd !important;
        }
        /*.bootstrapDatepickr-cal{*/
        /*left:265px !important;*/
        /*}*/
        #beginDate{
            width:100%;
            line-height: 32px;
            border-radius: 5px;
            border: solid 1px #d0d0d0;
            font-size:15px;
            color:#999999 !important
        }
        .date div{
            margin-bottom:0 !important
        }
        .header{
            width:100%;
            overflow:hidden
        }
        #main input,select{
            text-indent:0.3em
        }
        .defualt{
            border:1px solid red !important;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>修改用药信息</h1>
</div>
<div id="main">
    <div class="name">
        <label>药品类别</label>
        <input id="mType" type="text" v-model="type"  placeholder="请输入药品类别" class="form-control input" >
    </div>
    <div class="number">
        <label>化学名称</label>
        <input id="chemicalName" type="text" v-model="chemistryName"  placeholder="请输入化学名称" class="form-control input">
    </div>
    <div class="spec">
        <label>商品名称</label>
        <input id="name" type="text" placeholder="请输入商品名称" v-model="productName" class="form-control input">
    </div>
    <div class="times">
        <label>单次用量</label>
        <input id="usage" type="text"  placeholder="请输入单次用量" v-model="consumption" class="form-control input">
    </div>
    <div class="times">
        <label>使用频率</label>
        <input id="rate" type="text"  placeholder="请输入使用频率" v-model="frequency" class="form-control input">
    </div>
    <div class="times">
        <label>给药方式</label>
        <input id="ways" type="text"  placeholder="请输入给药方式" v-model="mode" class="form-control input">
    </div>
    <div class="times">
        <label>是否停用</label>
        <select name="" class="form-control input" v-model="useStop" id="useStop">
            <option value="">请选择</option>
            <option value="1">是</option>
            <option value="0">否</option>
        </select>
    </div>
    <div>
        <div class="form-group submitBtn" style="text-align: center ">
            <button type="button" class="btn" data-dismiss="modal" id="closeModalButt" @click="closeFrame()">
                关闭
            </button>
            <button type="submit" class="btn" id="keep"  @click="keep()" style="margin-left:20px;" >保存</button>
        </div>
    </div>
</div>

<script>
    var vm = new Vue({
        el:"#main",
        data:{
            id:'',
            idCard:'',
            checkId:'',
            type:'',
            chemistryName:'',
            productName:'',
            consumption:'',
            frequency:'',
            mode:'',
            useStop:''
        },
        mounted(){
            //初始化获取数据
            // 获取用药名称
            let that = this;
            var url = location.search.split('?')[1];
            console.log(url)
            that.idCard = url.split('&')[0].split('=')[1]
            that.checkId = url.split('&')[1].split('=')[1]
            let [name,value] = that.checkId = url.split('&')[2].split('=')[1];
            if( name ){
                that.id = name;
                // 获取用药数据
                var parentVM = parent.document.getElementById('testIframe').contentWindow.vm;
                parentVM.medicalList.forEach((item,index)=>{
                    if( item.id == that.id ){
                        that.type = item.type;
                        that.chemistryName = item.chemistryName;
                        that.productName = item.productName;
                        that.consumption = item.consumption;
                        that.frequency = item.frequency;
                        that.mode = item.mode;
                        that.useStop = item.useStop;
                    }
                })
            }
            $.ajax({
                url:"${URL_SCREENING_GETBREADLINE}",
                dataType:'json',
                type:'post',
                success:function(data){
                    that.urlLib = JSON.parse(data.data)
                    that.refreshto = that.urlLib[that.urlLib.length-1].href
                }
            })
        },
        methods:{
            closeFrame : function() {
                window.parent.simpleCloseModal();
            },
            keep:function(){
                // 获取当前输入框的所有数据
                // 获取病人id
                // $('#keep').attr('disabled','disabled')
                let that = this;
                if( that.type != '' && that.chemistryName != '' && that.productName != '' && that.consumption != '' && that.frequency != '' && that.mode != '' && that.useStop != ''  ){
//                    that.closeFrame()
                    // 获取父页面的JS对象内容
                    var parentVM = parent.document.getElementById('testIframe').contentWindow.vm;
                    if( that.id == '' ){
                        parentVM.medicalList.push({
                            id:parentVM.medicalList.length+1,
                            type:that.type,
                            chemistryName:that.chemistryName,
                            productName:that.productName,
                            consumption:that.consumption,
                            frequency:that.frequency,
                            mode:that.mode,
                            useStop:that.useStop,
                            isAdd:true
                        })
                    }else{
                        parentVM.medicalList.forEach((item,index)=>{
                            if( item.id == that.id ){
                                item.type = that.type;
                                item.chemistryName = that.chemistryName;
                                item.productName = that.productName;
                                item.consumption = that.consumption;
                                item.frequency = that.frequency;
                                item.mode = that.mode;
                                item.useStop = that.useStop;
                            }
                        })
                    }
                    window.parent.simpleCloseModal();
                    console.log(parent.document.getElementById('testIframe').contentWindow.vm.medicalList)
                }else{
                    var inputs = $('input')
                    var arr = []
                    var arr1 = []
                    if( that.useStop == '' ) {
                        $('#useStop').addClass('defualt')
                        // $('#keep').attr('disabled','disabled');
                    }else{
                        $('#useStop').removeClass('defualt');
                        // $('#keep').attr('disabled',false)
                    }
                    for( var a = 0; a < inputs.length; a++ ){
                        if( $(inputs[a]).val() === '' ){
                            $(inputs[a]).attr('placeholder','请输入值')
                            $(inputs[a]).addClass('defualt')
                            arr.push($(inputs[a]))
                        }else{
                            $(inputs[a]).removeClass('defualt')
                        }
                    }
                    if( arr1[0] ){
                        arr1[0].focus()
                        $(arr1[0]).removeClass('defualt')
                    }else{
                        arr[0].focus()
                        $(arr[0]).removeClass('defualt')
                    }
                }
            }
        }
    })
</script>
</body>
</html>

